<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./plantillas/plantilla.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">    
    <ui:define name="content">
        <p:wizard nextLabel="Continuar" backLabel="Regresar">
            <p:tab title="Busqueda">
                <p:outputLabel value="Seleccione el método de busqueda:"/>
                <h:panelGrid columns="2">
                    <h:panelGrid columns="3" cellpadding="5">
                        <h:outputLabel for="menu" value="Productos:" />
                        <p:selectCheckboxMenu id="menu" value="#{seleccionproducctosubicacionController.selectedProducts}" label="Seleccione"
                                              filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
                            <f:selectItems value="#{seleccionproducctosubicacionController.products}" />
                        </p:selectCheckboxMenu>
                        <p:commandButton value="Seleccionar Productos" update="display" />
                    </h:panelGrid>
                    <h:panelGrid columns="3" cellpadding="5">
                        <h:outputLabel for="menu1" value="Establecimientos:" />
                        <p:selectCheckboxMenu id="menu1" value="#{seleccionproducctosubicacionController.selectedShopping}" label="Seleccione"
                                              filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
                            <f:selectItems value="#{seleccionproducctosubicacionController.shopping}" />
                        </p:selectCheckboxMenu>
                        <p:commandButton value="Seleccionar Estabecimientos" update="display1" />
                    </h:panelGrid>
                    <p:outputLabel id="display">
                        <p:dataList value="#{seleccionproducctosubicacionController.selectedProducts}" var="products" emptyMessage="Seleccione los productos">
                            <p:outputLabel value="#{products}"/>
                        </p:dataList>
                    </p:outputLabel>
                    <p:outputPanel id="display1">
                        <p:dataList value="#{seleccionproducctosubicacionController.selectedShopping}" var="shopping" emptyMessage="Seleccione los establecimientos">
                            <p:outputLabel value="#{shopping}"/>
                        </p:dataList>
                    </p:outputPanel>
                </h:panelGrid>
            </p:tab>
            <p:tab title="Ubicaciones">
                <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false" >
                    <p:graphicImage alt="cargando" url="./img/cargando.gif"/>
                    <p:outputLabel value="Cargando..."/>
                </p:dialog>
                <p:gmap  center="13.802994,-88.9052918" zoom="9" type="ROADMAP" style="width: 100%;height: 680px" model="#{pruebaController.mapa}">
                    <p:ajax event="overlaySelect" listener="#{pruebaController.onMarkerSelect}" onstart="PF('statusDialog').show()" oncomplete="PF('statusDialog').hide()"/>
                    <p:gmapInfoWindow maxWidth="1900">
                        <p:tabView style="width: 100%" dynamic="true">
                            <p:tab title="Productos">
                                <p:dataTable value="#{pruebaController.getJson4('http://api.gobiernoabierto.gob.sv/products',
                                                      'header_file_name,slug,acronym')}"
                                             rows="5"
                                             paginator="true"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                             rowsPerPageTemplate="5,10,15"
                                             var="variables1"
                                             style="width: 90%"
                                             >
                                    <p:column headerText="Producto">
                                        <h:outputText value="#{variables1.hijos[0].value}"/>
                                    </p:column>
                                    <p:column headerText="Precio">
                                        <h:outputText value="#{variables1.hijos[1].value}"/>
                                    </p:column>
                                    <p:column headerText="Fecha de actualización">
                                        <h:outputText value="#{variables1.hijos[2].value}"/>
                                    </p:column>
                                </p:dataTable>
                            </p:tab>
                            <p:tab title="productos más baratos">
                                <p:dataTable value="#{pruebaController.getJson4('http://api.gobiernoabierto.gob.sv/institutions',
                                                      'header_file_name,slug,acronym')}"
                                             rows="5"
                                             paginator="true"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                             rowsPerPageTemplate="5,10,15"
                                             var="variables2"
                                             style="width: 90%"
                                             >
                                    <p:column headerText="Producto">
                                        <h:outputText value="#{variables2.hijos[0].value}"/>
                                    </p:column>
                                    <p:column headerText="Precio">
                                        <h:outputText value="#{variables2.hijos[1].value}"/>
                                    </p:column>
                                    <p:column headerText="Fecha de actualización">
                                        <h:outputText value="#{variables2.hijos[2].value}"/>
                                    </p:column>
                                </p:dataTable>
                            </p:tab>
                            <p:tab title="Reportar diferencia de precios">
                                <p:dataTable value="#{pruebaController.getJson4('http://api.gobiernoabierto.gob.sv/institutions',
                                                      'header_file_name,slug,acronym')}"
                                             rows="5"
                                             paginator="true"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                             rowsPerPageTemplate="5,10,15"
                                             var="variables3"
                                             style="width:90%"
                                             >
                                    <p:column headerText="Producto" width="40%">
                                        <h:outputText value="#{variables3.hijos[0].value}"/>
                                    </p:column>
                                    <p:column headerText="Precio" width="20%">
                                        <h:outputText value="#{variables3.hijos[1].value}"/>
                                    </p:column>
                                    <p:column headerText="Fecha de actualización" width="20%">
                                        <h:outputText value="#{variables3.hijos[2].value}"/>
                                    </p:column>
                                    <p:column headerText="Precio actual" width="20%">
                                        <h:inputText value="#{variables3.hijos[2].value}"/>
                                    </p:column>
                                </p:dataTable>
                                <p:commandButton value="Reportar Precios"/>
                            </p:tab>
                            <p:tab title="Agregar producto">
                                <p:panelGrid columns="2">
                                    <p:panelGrid columns="2">
                                        <p:outputLabel value="Categoría"/>
                                        <p:selectOneMenu id="menu" value="#{pruebaController.categoria}" label="Seleccione" filter="true" filterMatchMode="startsWith">
                                            <f:selectItems value="#{seleccionproducctosubicacionController.products}" />
                                        </p:selectOneMenu>
                                        <p:outputLabel value="Producto"/> <p:inputText value="#{pruebaController.producto}"/>
                                        <p:outputLabel value="Precio"/> <p:inputText value="#{pruebaController.producto}"/>
                                    </p:panelGrid>
                                    <p:commandButton value="Agregar producto"/>
                                </p:panelGrid>
                                <p:dataTable value="#{pruebaController.getJson4('http://api.gobiernoabierto.gob.sv/institutions',
                                                      'header_file_name,slug,acronym')}"
                                             rows="5"
                                             paginator="true"
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                             rowsPerPageTemplate="5,10,15"
                                             var="variables3"
                                             style="width:90%"
                                             >
                                    <f:facet name="header">
                                        Artículos agregados por usuarios
                                    </f:facet>
                                    <p:column headerText="Producto" width="40%">
                                        <h:outputText value="#{variables3.hijos[0].value}"/>
                                    </p:column>
                                    <p:column headerText="Precio" width="20%">
                                        <h:outputText value="#{variables3.hijos[1].value}"/>
                                    </p:column>
                                    <p:column headerText="" width="20%">
                                        97 likes
                                    </p:column>
                                    <p:column headerText="" width="20%">
                                        9 dislikes
                                    </p:column>
                                </p:dataTable>
                            </p:tab>
                        </p:tabView>
                    </p:gmapInfoWindow>
                </p:gmap>
            </p:tab>
        </p:wizard>
    </ui:define>
</ui:composition>
